<template>
  <div class="maintenance-work-order">
    <el-card class="box-carddan">
      <div slot="header" class="card-header">
        <span>保养工单</span>
      </div>

      <el-form
        :model="formData"
        :rules="rules"
        ref="workOrderForm"
        label-width="120px"
        class="work-order-form">

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item
              label="工单单号"
              prop="orderNo"
              required>
              <el-input
                v-model="formData.orderNo"
                placeholder="系统自动生成"
                disabled>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="工单主题"
              prop="title"
              required>
              <el-input
                v-model="formData.title"
                placeholder="请输入">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item
              label="工单类型"
              prop="type"
              required>
              <el-input
                v-model="formData.type"
                placeholder="下发工单"
                disabled>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="派单人员"
              prop="dispatcher"
              required>
              <el-input
                v-model="formData.dispatcher"
                placeholder="赵阳笑"
                disabled>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item
              label="所在部门"
              prop="department"
              required>
              <el-input
                v-model="formData.department"
                placeholder="保养部门">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="保养班组"
              prop="team"
              required>
              <el-input
                v-model="formData.team"
                placeholder="请输入">
                <el-button
                  slot="append"
                  icon="el-icon-search">
                </el-button>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item
              label="负责人"
              prop="manager"
              required>
              <el-input
                v-model="formData.manager"
                placeholder="请输入">
                <el-button
                  slot="append"
                  icon="el-icon-search">
                </el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="其他维修人"
              prop="others">
              <el-select
                v-model="formData.others"
                multiple
                filterable
                placeholder="请选择">
                <el-option
                  v-for="item in maintainers"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item
          label="备注"
          prop="remark">
          <el-input
            type="textarea"
            :rows="4"
            placeholder="请输入备注"
            v-model="formData.remark">
          </el-input>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="box-cardsb">
      <div slot="header" class="card-header">
        <span>设备信息</span>
      </div>

      <el-form
        :model="formDatasb"
        :rules="rulessb"
        ref="equipmentForm"
        label-width="100px"
        class="equipment-form">

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item
              label="设备名称"
              prop="name"
              required>
              <el-input
                v-model="formDatasb.name"
                placeholder="请输入">
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click="handleSearchsb">
                </el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="设备编号">
              <el-input
                v-model="formDatasb.code"
                placeholder="EQ001"
                disabled>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item
              label="设备类型">
              <el-input
                v-model="formDatasb.type"
                placeholder="压力设备"
                disabled>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="规格型号">
              <el-input
                v-model="formDatasb.model"
                placeholder="HY-1000"
                disabled>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item
              label="存放位置">
              <el-input
                v-model="formDatasb.location"
                placeholder="车间A1"
                disabled>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="使用部门">
              <el-input
                v-model="formDatasb.department"
                placeholder="制造部"
                disabled>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card class="box-cardmu">
      <div slot="header" class="card-header">
        <span>保养项目</span>
      </div>

      <!-- 操作按钮 -->
      <div class="operation-bar">
        <el-button
          type="success"
          size="small"
          @click="handleAdd">
          添加
        </el-button>
        <el-button
          type="primary"
          size="small"
          plain
          @click="handleRemove">
          移除
        </el-button>
      </div>

      <!-- 表格 -->
      <el-table
        :data="tableDatamu"

        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="id"
          label="序号"
          width="80">
        </el-table-column>
        <el-table-column
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              style="color: #00B42A"
              @click="handleDelete(scope.row)">
              移除
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="保养项目">
        </el-table-column>
        <el-table-column
          prop="part"
          label="保养部位">
        </el-table-column>
        <el-table-column
          prop="level"
          label="保养等级">
        </el-table-column>
        <el-table-column
          prop="requirement"
          label="保养要求">
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 添加项目弹窗 -->
    <el-dialog
    title="选择保养项目"
    :visible.sync="dialogVisible"
    width="80%"
    class="maintenance-selector">

    <!-- 搜索条件 -->
    <div class="search-bar">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input
            v-model="searchForm.keyword"
            placeholder="请输入保养项目名称/编号"
            clearable>
          </el-input>
        </el-col>
        <el-col :span="6">
          <el-select
            v-model="searchForm.part"
            placeholder="请选择保养部位"
            clearable>
            <el-option
              v-for="item in partOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-select
            v-model="searchForm.level"
            placeholder="请选择保养级别"
            clearable>
            <el-option
              v-for="item in levelOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-input
            v-model="searchForm.requirement"
            placeholder="请输入保养要求"
            clearable>
          </el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="btn-row">
        <el-col :span="24" style="text-align: right">
          <el-button plain size="small">重置</el-button>
          <el-button type="success" size="small">查询</el-button>
        </el-col>
      </el-row>
    </div>

    <!-- 表格 -->
    <el-table
      :data="tableData"
      border
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="id"
        label="序号"
        width="80">
      </el-table-column>
      <el-table-column
        prop="name"
        label="保养项目名称">
      </el-table-column>
      <el-table-column
        prop="code"
        label="保养项目编号"
        width="120">
      </el-table-column>
      <el-table-column
        prop="part"
        label="保养部位"
        width="120">
      </el-table-column>
      <el-table-column
        prop="level"
        label="保养级别"
        width="100">
      </el-table-column>
      <el-table-column
        prop="requirement"
        label="保养要求">
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

    <!-- 底部按钮 -->
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="success" @click="handleConfirm">确认</el-button>
    </div>
  </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'MaintenanceWorkOrder',
  data() {
    return {
      dialogVisible: false,
      searchForm: {
        keyword: '',
        part: '',
        level: '',
        requirement: ''
      },
      partOptions: [
        { value: '发动机', label: '发动机' },
        { value: '进气系统', label: '进气系统' },
        { value: '制动系统', label: '制动系统' }
      ],
      levelOptions: [
        { value: '一级', label: '一级' },
        { value: '二级', label: '二级' },
        { value: '三级', label: '三级' }
      ],
      tableData: [
        {
          id: 1,
          name: '润滑油更换',
          code: 'PM001',
          part: '发动机',
          level: '一级',
          requirement: '排放旧油、清洗油道、更换新油'
        },
        // ... 更多数据
      ],
      currentPage: 1,
      pageSize: 10,
      total: 45,
      selectedItems: [],
      tableDatamu: [
        {
          id: 1,
          name: '润滑油更换',
          part: '液压系统',
          level: '一级',
          requirement: '润滑'
        },
        {
          id: 2,
          name: '润滑油更换',
          part: '液压系统',
          level: '一级',
          requirement: '润滑'
        },
        {
          id: 3,
          name: '润滑油更换',
          part: '液压系统',
          level: '一级',
          requirement: '润滑'
        },
        {
          id: 4,
          name: '润滑油更换',
          part: '液压系统',
          level: '一级',
          requirement: '润滑'
        },
        {
          id: 5,
          name: '润滑油更换',
          part: '液压系统',
          level: '一级',
          requirement: '润滑'
        }
      ],
      multipleSelection: [],
      dialogVisible: false,
      //设备信息
      formDatasb: {
        name: '',
        code: 'EQ001',
        type: '压力设备',
        model: 'HY-1000',
        location: '车间A1',
        department: '制造部'
      },
      rulessb: {
        name: [
          { required: true, message: '请输入设备名称', trigger: 'blur' }
        ]
      },
      //保养工单
      formData: {
        orderNo: '',
        title: '',
        type: '下发工单',
        dispatcher: '赵阳笑',
        department: '',
        team: '',
        manager: '',
        others: [],
        remark: ''
      },
      maintainers: [
        { value: '1', label: '张三' },
        { value: '2', label: '李四' },
        { value: '3', label: '王五' }
      ],
      rules: {
        title: [
          { required: true, message: '请输入工单主题', trigger: 'blur' }
        ],
        department: [
          { required: true, message: '请输入所在部门', trigger: 'blur' }
        ],
        team: [
          { required: true, message: '请选择保养班组', trigger: 'blur' }
        ],
        manager: [
          { required: true, message: '请选择负责人', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.selectedItems = val
    },
    handleSizeChange(val) {
      this.pageSize = val
      // 重新加载数据
    },
    handleCurrentChange(val) {
      this.currentPage = val
      // 重新加载数据
    },
    handleCancel() {
      this.dialogVisible = false
    },
    handleConfirm() {
      if (this.selectedItems.length === 0) {
        this.$message.warning('请选择保养项目')
        return
      }
      this.$emit('confirm', this.selectedItems)
      this.dialogVisible = false
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleAdd() {
      this.dialogVisible = true
    },
    handleRemove() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning('请选择要移除的项目')
        return
      }
      this.$confirm('确认移除选中的项目?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 处理移除逻辑
        this.$message.success('移除成功')
      })
    },
    handleDelete(row) {
      this.$confirm('确认移除该项目?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 处理单个移除逻辑
        this.$message.success('移除成功')
      })
    },
    confirmAdd() {
      // 处理添加逻辑
      this.dialogVisible = false
      this.$message.success('添加成功')
    },
    handleSearchsb() {

      // 处理设备搜索
      console.log('搜索设备')
    }
}
}
</script>

<style scoped>
.box-cardmu{
  width: 1200px;
  margin-left: 15px;
  margin-bottom: 20px;
}
.box-cardsb{
  width: 1200px;
  margin-left: 15px;
  margin-bottom: 20px;
}
.maintenance-items {
  padding: 20px;
}

.operation-bar {
  margin-bottom: 20px;
}

/* 表格样式优化 */
.el-table {
  margin-bottom: 20px;
}

.el-table th {
  background-color: #F5F7FA;
  color: #606266;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .maintenance-items {
    padding: 10px;
  }

  .el-table {
    width: 100%;
    overflow-x: auto;
  }

  .operation-bar {
    margin-bottom: 15px;
  }
}
.box-carddan{
  width: 1200px;
  margin-left: 15px;
  margin-bottom: 20px;
}
.equipment-info {
  padding: 20px;
}

.equipment-form {
  margin-top: 20px;
}

/* 禁用输入框样式 */
.el-input.is-disabled .el-input__inner {
  color: #606266;
  background-color: #F5F7FA;
}

/* 搜索按钮样式 */
.el-input-group__append {
  background-color: #fff;
  border-left: 1px solid #DCDFE6;
  cursor: pointer;
}

.el-input-group__append:hover {
  background-color: #F5F7FA;
}

/* 表单项间距 */
.el-form-item {
  margin-bottom: 18px;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .equipment-info {
    padding: 10px;
  }

  .el-col {
    width: 100% !important;
  }

  .el-form-item__label {
    float: none;
    display: block;
    text-align: left;
    padding: 0 0 8px;
  }

  .el-form-item__content {
    margin-left: 0 !important;
  }
}
.maintenance-work-order {
  padding: 20px;
}

.work-order-form {
  margin-top: 20px;
}

.el-select {
  width: 100%;
}

.el-textarea__inner {
  min-height: 120px !important;
}

/* 禁用输入框样式 */
.el-input.is-disabled .el-input__inner {
  color: #606266;
  background-color: #F5F7FA;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .maintenance-work-order {
    padding: 10px;
  }

  .el-form-item {
    margin-bottom: 15px;
  }

  .el-col {
    width: 100% !important;
  }
}
</style>
